/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
<view>
  <view class="search-wrap">
    <u-search placeholder="请输入要搜索的内容" v-model="serviceKeyword" :showAction="false" @search="onSearch"></u-search>
  </view>
  <view class="index_class">

    <view class="class_scoll">

      <scroll-view class="scroll-view_H scroll_left" scroll-with-animation="true" scroll-anchoring="true"
                   scroll-y="true" scroll-left="0">
        <view class="scroll-view-item_H scroll_left_item " @click="clickActive(item.id, index)"
              :class="{'active': currIndex === index}" v-for="(item, index) in list" :key="index">
          <view>{{ item.cate_name }}</view>
        </view>
      </scroll-view>
      <scroll-view class="scroll-view_H scroll_right" scroll-y="true" scroll-with-animation="true"
                   scroll-anchoring="true" scroll-right="0">
        <view class="scroll-view-item_H scroll_right_item">
<!--          <u-swiper v-if="bannerList.length != 0" class="swiperBox" :list="bannerList" name="ad_pic"  @click="bannerClick" height="200" :border-radius="20"-->
<!--                    style="padding: 25rpx 0"></u-swiper>-->
          <view class="right_scoll_items" v-for="(item, index) in goodsList" :key="index">
            <view class="s_title">{{item.cate_name}}</view>
            <view class="right_scoll_items_img">
              <view @click="getnav('/pagesB/local/service_list?id=' + erth.id + '&twoCid=' + erth.pid)" class="img_items"
                    v-for="(erth,index2) in item.three" :key="index2">
                <image :src="erth.cate_pic" mode="aspectFit" />
                <view>{{ erth.cate_name }}</view>
              </view>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>
  </view>

</view>
</template>

<script>
export default {
  data() {
    return {
      list: [
      //     {
      //   cate_name: this.$t('推荐分类'),
      //   id: 0
      // }
      ],
      currIndex: 0,
      goodsList: [],
      bannerList: [],
      serviceKeyword:''
    }
  },

  onLoad() {
    this.getBannerList()
    this.getCategory()
  },

  methods: {
    onSearch(){
      this.$u.route({url:`/pagesB/local/service_list?keyword=${this.serviceKeyword}`})
    },
    getCategory() {
      this.$http.getLocalCategory({}).then((res) => {
        if (res.status === 200) {
          const newList = this.list.concat(res.data.cateres)
          this.list = newList
          this.goodsList = [{
            three: res.data.recom_cate
          }]
          this.clickActive(newList[0].id, 0)
        } else {
          this.$toast(res.mess)
        }
      })
    },
    getBannerList(){
      const data = {
        tag: 'mobile_category_banner'
      }
      this.$http.getAdByTag(data).then(res => {
        if(res.status == 200){
          this.bannerList = res.data
        }
      })
    },
    bannerClick(index){
      let ad = this.bannerList[index];
      if(ad.ad_url != ''){
        this.$u.route({url:ad.ad_url,type:ad.ad_url_type})
      }
    },
    clickActive(id, index) {
      // if (this.currIndex === index) return false
      this.currIndex = index
      this.$loading()
      this.$http.getLocalCategoryChildren({
        cate_id: id
      }).then(res => {
        if (res.status === 200) {
          if (id === 0) {
            this.goodsList = [{
              three: res.data
            }]
            return false
          }
          this.goodsList = res.data

        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.search-wrap{
  background: white;
  padding: 20rpx 30rpx;
}
.icon_e64c {
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  font-size: 80rpx;
  color: #CECDCD;
  flex-direction: column;
}

.active {
  width: 100% !important;

}

.active image {
  width: 378rpx !important;
  height: 378rpx !important;
}

.index_class,
page {
  height: 100%;
}

.s_title {
  padding-left: 30rpx !important;
  padding-bottom: 0 !important;
}

.class_scoll {
  top: 100rpx !important;
  height: 100% !important;
}

.class_scoll {
  height: calc(100% - 100rpx);
  /*  #ifdef  APP-PLUS  */
  height: calc(100% - 100rpx - var(--status-bar-height));
  /*  #endif  */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;

  .scroll_left {
    width: 200rpx;
    background: #fff;
    margin-right: 20rpx;


    // padding: 0 30rpx;
    .scroll_left_item {
      width: 200rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      view {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 28rpx;
        color: #555;
        border-left: 4rpx solid transparent;
        // border-radius: 28rpx;

      }

      &.active view {
        color: #ff4c15;
        font-weight: 600;
        font-size: 32rpx
      }

    }


  }

  .scroll_right {
    //width: calc(100% - 240rpx);
    padding-right: 20rpx;
    padding-top: 20rpx;

    .scroll_right_item {

      .right_scoll_items {
        border-radius: 18rpx;
        background-color: #fff;
        margin-bottom: 16rpx;

        .s_title {
          font-size: 24rpx;
          padding: 20rpx 0;
          font-weight: 600
        }

        .right_scoll_items_img {
          display: flex;
          flex-wrap: wrap;
          padding: 30rpx;

          .img_items {
            width: 33.33%;
            text-align: center;
            margin-bottom: 30rpx;

            image {
              width: 86rpx;
              height: 86rpx;
              border-radius: 8rpx;
            }

            view {
              text-align: center;
              font-size: 24rpx
            }
          }
        }
      }

    }
  }
}
</style>
